<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../font2/iconfont.css">
    <link rel="stylesheet" href="../css/com.css">
    <link rel="stylesheet" href="../css/goodsDetail.css">
    <script src="../js/jquery-3.6.0.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/interface.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 头部公共部分 -->
    <div class="s-header">
        <div class="header-wrap">
            <div class="header-l">
                <ul class="nav-l">
                    <li class="nl-li"><a href="">帮助中心</a></li>
                    <li class="nl-li"><a href="">收藏</a></li>
                    <li class="nl-li"><a href="">360官网</a></li>
                    <li class="nl-li"><a href="">360智慧生活</a></li>
                </ul>
            </div>
            <div class="header-r">
                <div class="nav-r">
                    <div class="tips nr-li">
                        <a href="./login.html">登录</a>
                        <a href="./reg.html">注册</a>
                    </div>
                    <div class="nr-li"><a href="./shoppingcar.html"><span class="iconfont icon-shangpin"></span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="navwrap">
        <div class="navwrapper">
            <div class="navsearch-l">
                <div class="navlist"><img class="logo" src="../images/logo.png" alt=""><a href="javascript:;">新品推荐</a><a
                        href="javascript:;">热卖榜单</a></div>
            </div>
            <div class="navsearch-r">
                <div class="searchBar"><input type="text"><span class="iconfont icon-sousuo"></span></div>
                <div class="searchlist"><a href="">记录仪</a><a href="">摄像机</a><a href="">路由器</a><a href="">耳机</a><a
                        href="">扫地机</a><a href="">智能手表</a></div>
            </div>
        </div>
    </div>

    <!-- 内容区 -->
    <div class="mainContent">

        <div class="prod-intro">
            <div class="sPic">

                <div class="picWrap">
                    <div class="shadow"></div>
                    <img class="smallImg" src="" alt="">
                    <ul class="switchBar">
                        <!-- <li><img src="../ojpg/pic_13.jpg" alt=""></li>
                        <li><img src="../ojpg/pic_13.jpg" alt=""></li>
                        <li><img src="../ojpg/pic_13.jpg" alt=""></li>
                        <li><img src="../ojpg/pic_13.jpg" alt=""></li> -->
                    </ul>

                </div>
                <div class="scaleWrap">
                    <!-- <div class="scaleBar"><img src="" alt="" class="bigImg"></div>
                    <div class="sInfo">
                        <div class="sInfo-name">
                            华为 HUAWEI Mate 40 Pro麒麟9000 5G SoC芯片 超感知徕卡电影影像 66W有线超级快充8GB+256GB秋日胡杨5G全网通套餐二（含充电器和数据线）
                        </div>
                        <div class="divider"></div>
                        <div class="sInfo-price">
                            <div class="sInfo-tips">价&emsp;格:</div>
                            <div class="sInfoPrice">￥<span>2999</span></div>
                        </div>
                        <div class="wrap-input">
                            <div class="wrap-tips">数&emsp;量：</div>
                            <div class="wrapInput">
                                <a href="javascript:;" class="reduce">-</a>
                                <input type="text" class="count-input" value="1">
                                <a href="javascript:;" class="add">+</a>
                            </div>
                        </div>
                        <div class="buyGoods">

                            <a class="addShoppingCar" href="">加入购物车</a>
                        </div>
                    </div> -->
                </div>
            </div>


        </div>
    </div>

    <!-- 底部公共部分 -->
    <div class="footerWrap">
        <div class="footer-top">
            <div class="ftWrap">
                <div class="aboutbox">
                    <p class="helpTitle">关于商城</p>
                    <p class="helpText">
                        360商城是奇虎360公司的官方电商平台，主要经营360安全智能设备，以及相关领域消费品。提供最新的360智能设备，最贴心的售后服务，360社区一手评测资讯，享受360安全、安心、放心的购物体验。
                    </p>
                </div>
                <div class="linkbox">
                    <p class="helpTitle">售后服务</p>
                    <a href="">7日无理由退货 </a>
                    <a href="">质量问题15日内换货 </a>
                    <a href="">保修条款 </a>
                    <a href="">服务流程 </a>
                    <a href="">许可协议 </a>
                    <a href="">隐私政策 </a>

                </div>
                <div class="linkbox">
                    <p class="helpTitle">帮助中心</p>
                    <a href="">用户注册 </a>
                    <a href="">会员说明 </a>
                    <a href="">登录与密码找回 </a>
                    <a href="">购买指南 </a>
                    <a href="">支付方式 </a>
                    <a href="">配送与说明 </a>
                </div>
                <div class="contentbox">
                    <p class="helpTitle">联系我们</p>
                    <p class="bigText">400-6822-360</p>
                    <p class="smallText">周一至周日 9:00-18:00（仅收市话费）</p>
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="fbWrap">
                <div class="fbtBox">
                    <a href=""><span class="iconfont icon-fanhui"></span> 7天无理由退货 </a>
                    <a href=""><span class="iconfont icon-double-arrows"></span> 15天免费换货 </a>
                    <a href=""><span class="iconfont icon-shangpin1
                        "></span> 满99元包邮 </a>
                </div>
                <div class="fbBbox">
                    <p class="fb-top"> ©2019-2021 mall.360.cn版权所有 </p>
                    <p class="fb-center">京ICP备08010314号-6 营业执照 </p>
                    <div class="fb-bottom">公司名称：北京视觉世界科技有限公司 | 社会统一信用代码：91110105336460203N | 食品经营许可证<br>
                        公司地址：北京市朝阳区酒仙桥路6号院2号楼1至17层102号内5层501 | 联系方式：400-6822-360</div>
                </div>
            </div>
        </div>
    </div>
</body>

<script>
    $(function () {
        var account = getCookie("lgc");
        console.log(account);
        if (account) {
            $(".tips").html(`欢迎您,${account} <button style="font-size: 12px" onclick="exit()">退出</button>`).css({ "color": "#fff", fontSize: "12px" });
        }

        var url = urlParse();
        console.log(url);

        if (!(url.gid)) {
            location.href = "./goods.html";
        }

        searchGoodsByGoodsId({ gid: url.gid }).then(({ status, detail, data }) => {
            console.log(data);
            if (status) {
                var { id, goodsId, goodsImg, goodsName, goodsPrice, smallPicList } = data;
                $(".smallImg").attr("src", goodsImg);
                var html = "";
                // smallPicList.forEach((smallPic) => {
                //     console.log(smallPic);
                //     html += `<li><img src="${smallPic}" alt=""></li>`;
                // });
                var leng = smallPicList.length > 4 ? 4 : smallPicList.length;
                for (var i = 0; i < leng; i++) {
                    var smallPic = smallPicList[i];
                    html += `<li><img src="${smallPic}" alt=""></li>`;
                }
                $(".switchBar").html(html);


                // 右边盒子动态生成
                $(".scaleWrap").html(`<div class="scaleBar"><img src="${goodsImg}" alt="" class="bigImg"></div>
                    <div class="sInfo">
                        <div class="sInfo-name">
                           ${goodsName}
                        </div>
                        <div class="divider"></div>
                        <div class="sInfo-price">
                            <div class="sInfo-tips">价&emsp;格:</div>
                            <div class="sInfoPrice">￥<span class="sInfo-price">${goodsPrice}</span></div>
                        </div>
                        <div class="wrap-input">
                            <div class="wrap-tips">数&emsp;量：</div>
                            <div class="wrapInput">
                                <a href="javascript:;" class="reduce">-</a>
                                <input type="text" class="count-input" value="1">
                                <a href="javascript:;" class="add">+</a>
                            </div>
                        </div>
                        <div class="buyGoods">

                            <a class="addShoppingCar">加入购物车</a>
                        </div>
                    </div>`);

                // 加入购物车
                $(".add").click(function () {
                    var buyNum = $(this).prev().val();
                    buyNum++;
                    $(this).prev().val(buyNum);
                    // $.get("../php/updateShoppingCarByGid.php",{id,type:1},function(result){
                    //     var {status,detail}=result;
                    //     if(status){

                    //     }else{
                    //         alert(detail);
                    //     }
                    // })
                })
                $(".reduce").click(function () {
                    var buyNum = $(this).next().val();
                    if (buyNum <= 1) return false;
                    buyNum--;
                    if (buyNum == 1);
                    $(this).next().val(buyNum);
                })

                $(".buyGoods").click(function () {
                    var user = getCookie("lgc");
                    var gId = url.gid;
                    var buyNum = $(".count-input").val();

                    if (user) {
                        addShoppingCar({ user, gId, buyNum }).then(({ status, detail }) => {
                            console.log(buyNum);
                            if (status) {
                                if (confirm("是否加入购物车？")) {
                                    location.href = "./shoppingcar.html";
                                }
                            }
                        }).catch(err => {
                            console.log(err);
                        }).finally(function () {

                        })
                    } else {
                        // location.href = "./login.html";

                        if (confirm("未登录，去登录？")) {

                            location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
                        }
                    }
                })


            } else {
                location.href = "./goods.html";
            }
        }).catch(err => {
            console.log(err);
        }).finally(function () {

        })

        $(".icon-sousuo").click(function () {

            location.href = "./goods.html";

        })

        // 放大镜
        $(".picWrap").hover(function () {
            $(".shadow").css({ display: "block" });
            $(".scaleBar").css({ display: "block" });
            $(".picWrap").mousemove(function (e) {
                var e = e || window.event;
                var scale = $(".bigImg").innerWidth() / $(".smallImg").innerWidth();
                var maxLeft = $(this).innerWidth() - $(".shadow").width();
                var maxTop = $(this).innerHeight() - $(".shadow").height();
                // console.log(maxLeft, maxTop);
                var x = e.pageX - $(this).offset().left - $(".shadow").width() / 2;
                var y = e.pageY - $(this).offset().top - $(".shadow").height() / 2;
                console.log(x, y);
                if (x <= 0) x = 0;
                if (x > maxLeft) x = maxLeft;
                if (y <= 0) y = 0;
                if (y > maxTop) y = maxTop;
                $(".shadow").css({ left: x + "px", top: y + "px" });
                $(".bigImg").css({ left: -x * scale + "px", top: -y * scale + "px" });
            })
        }, function () {
            $(".shadow").css({ display: "none" });
            $(".scaleBar").css({ display: "none" });
        })

    })

</script>

</html>